/**
 * Ref 标记
 *    作用：用户获取标记元素的 DOM对象 或 组件实例对象
 *
 *    四种玩法：
 *      1. 字符串写法
 *        标记：ref="xxx"
 *        获取：this.refs.xxx
 *      2. 函数写法
 *        标记：ref={(el) => this.xxx = el}
 *        获取：this.xxx
 *      3. React.createRef() 写法
 *        标记：
 *          1. 通过 createRef() 创建一个 ref 数据：const xxx = React.createRef()
 *          2. 将创建出来的 ref 数据绑定在元素上：   ref={xxx}
 *        获取：
 *          1. 使用 xxx 即可。xxx 是个对象。 xxx.current 获取想要的。
 *      4. 函数组件中使用 useRef() hook 写法
 *        标记：
 *          1. 通过 useRef() 创建一个 ref 数据：const xxx = useRef()
 *          2. 将创建出来的 ref 数据绑定在元素上：  ref={xxx}
 *        获取：
 *          1. 使用 xxx 即可。xxx 是个对象。xxx.current 获取想要的。
 */

import React, { useRef } from "react";

import Hello from "./components/Hello";

// class App extends React.Component {
//   handleClick = () => {
//     console.log(this.refs);
//     console.log(this.refs.myDiv); // “refs”已弃用, 但还可以使用
//   };

//   myHello = React.createRef();

//   myDiv = React.createRef();

//   render() {
//     return (
//       <div>
//         <h1>Ref</h1>

//         {/* 字符串写法 */}
//         {/* <Hello ref="myHello" />
//         <div ref="myDiv">我的天</div>
//         <button onClick={this.handleClick}>点我，获取上面div的DOM对象</button> */}

//         {/* 函数写法 */}
//         {/* <Hello ref={(el) => (this.myHello = el)} />
//         <div ref={(el) => (this.myDiv = el)}>我的天</div>
//         <button
//           onClick={() => {
//             console.log(this.myHello);
//             console.log(this.myDiv);
//           }}
//         >
//           点我，获取上面div的DOM对象
//         </button> */}

//         {/* React.createRef() 写法 */}
//         <Hello ref={this.myHello} />
//         <div ref={this.myDiv}>我的天</div>
//         <button
//           onClick={() => {
//             console.log(this.myHello); // {current: xxxx}
//             console.log(this.myDiv.current);
//           }}
//         >
//           点我，获取上面div的DOM对象
//         </button>
//       </div>
//     );
//   }
// }

function App() {
  const myHello = useRef();
  const myDiv = useRef();

  return (
    <div>
      <h1>Ref</h1>

      <Hello ref={myHello} />
      <div ref={myDiv}>我的天</div>

      <button
        onClick={() => {
          console.log(myHello); // {current: xxxxx}
          console.log(myDiv.current);
        }}
      >
        点我，获取
      </button>
    </div>
  );
}

export default App;
